<script setup lang="ts">
import {ref, onMounted} from 'vue'
import {userClock, getUserClockRecords, userClockRecord} from '../api/vip'
import {ElMessage} from 'element-plus'
import {useRouter} from "vue-router"
import { ArrowLeft, Trophy, Coin, Check } from '@element-plus/icons-vue'

const router = useRouter();

const clockdata = ref<userClockRecord[]>([]);

onMounted(() => {
  getUserRecords();
})

const handleUserClock = (item) => {
  userClock().then (res => {
    if (res) ElMessage.success("签到成功，本次获取" + 100 + "积分，会员福利获取" + (res - 100) + "积分")
    else ElMessage.error("系统出错")
    getUserRecords();
  })
}

const getUserRecords = () => {
  getUserClockRecords().then(res => {
    clockdata.value = [...res]
  })
}
</script>

<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 p-4 md:p-6">
    <!-- 顶部标题栏 -->
    <div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl p-6 mb-8 border border-white/20">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-4">
          <button 
            @click="router.back()" 
            class="group flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-xl transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md"
          >
            <el-icon class="group-hover:-translate-x-1 transition-transform"><ArrowLeft /></el-icon>
            <span class="font-medium text-gray-700">返回</span>
          </button>
          
          <div>
            <h1 class="text-2xl md:text-3xl font-bold text-gray-800 mb-1">每日签到</h1>
            <p class="text-gray-600">2024年5月 - 连续签到获得更多奖励</p>
          </div>
        </div>
        
        <div class="flex items-center gap-4">
          <div class="bg-gradient-to-r from-yellow-400 to-orange-500 text-white px-6 py-3 rounded-xl shadow-lg">
            <div class="flex items-center gap-2">
              <el-icon class="text-xl"><Coin /></el-icon>
              <div>
                <div class="text-sm opacity-90">每日可获得</div>
                <div class="text-xl font-bold">500积分</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 签到日历 -->
    <div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl p-6 md:p-8 border border-white/20">
      <div class="mb-6">
        <h2 class="text-xl font-bold text-gray-800 mb-2">签到日历</h2>
        <p class="text-gray-600">每日签到获得积分奖励，连续签到获得额外奖励</p>
      </div>
      
      <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4">
        <div 
          v-for="(item, index) in clockdata" 
          :key="index" 
          class="group relative bg-gradient-to-br from-white to-gray-50 rounded-2xl p-4 border border-gray-200 hover:shadow-lg transition-all duration-300 hover:-translate-y-1"
        >
          <!-- 日期标识 -->
          <div class="flex items-center justify-between mb-3">
            <div 
              :class="[
                'w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold transition-all',
                (item.isToday && !item.isClock) 
                  ? 'bg-orange-500 text-white shadow-lg border-2 border-orange-600' 
                  : 'bg-slate-300 text-slate-700 shadow-sm'
              ]"
            >
              {{ index + 1 }}
            </div>
            <span class="text-xs font-medium text-gray-500 uppercase">{{ item.weekday }}</span>
          </div>

          <!-- 日期显示 -->
          <div class="text-center mb-4">
            <div class="text-sm font-medium text-gray-700">{{ item.date }}</div>
          </div>

          <!-- 签到状态 -->
          <div class="flex flex-col items-center gap-2">
            <!-- 状态图标 -->
            <div class="relative">
              <!-- 未来日期 -->
              <div v-if="item.isAfterToday" class="w-12 h-12 rounded-xl bg-gray-100 flex items-center justify-center">
                <svg class="w-6 h-6 text-gray-400" viewBox="0 0 1024 1024">
                  <path d="M848.794624 939.156685 571.780416 939.156685 571.780416 653.17123l341.897539 0 0 221.100654C913.677926 909.960704 884.482867 939.156685 848.794624 939.156685zM571.780403 318.743552c-11.861606-3.210138-31.443354-8.36864-39.829709-16.176435-0.596582-0.561766-1.016218-1.246413-1.613824-1.841971-0.560845 0.596582-1.016218 1.280205-1.613824 1.841971-8.386355 7.807795-15.96631 12.965274-27.827917 16.176435l0 263.544325L141.030675 582.287877 141.030675 355.202884c0-35.687834 29.195059-64.882688 64.883302-64.882688l150.649125 0c-16.984474-9.525965-32.846438-20.56233-46.111027-32.932045-60.250624-56.144691-71.129907-137.062605-24.283034-180.767027 19.615539-18.264986 46.252237-27.124736 75.026739-27.124736 39.933133 0 83.972915 17.070797 118.995968 49.706086 20.353331 18.983322 37.722624 43.405619 50.145075 69.056819 12.457267-25.6512 29.791744-50.074419 50.180915-69.056819 35.022029-32.63529 79.062835-49.706086 118.994944-49.706086 28.74071 0 55.410176 8.860774 75.025715 27.124736 46.882611 43.704422 35.96759 124.622336-24.283034 180.767027-13.264589 12.368691-29.127578 23.40608-46.111027 32.932045l144.649234 0c35.688243 0 64.882278 29.195981 64.882278 64.882688l0 227.084948L571.780416 582.287833 571.780416 318.743508zM435.064218 147.625267c-21.476966-19.965747-49.094144-31.913882-73.868288-31.913882-7.404954 0-21.125018 1.211597-29.863322 9.386803-2.000691 1.824563-8.070144 7.439462-8.070144 21.369754 0 15.650406 8.492749 40.24873 32.319386 62.477926 29.124506 27.12576 77.202432 47.601152 111.76704 47.601152 12.176794 0 16.492237-2.666701 16.527053-2.702541C489.524736 242.54505 475.664486 185.453773 435.064218 147.625267zM577.78135 254.790963c0 0 0.034816-0.034816 0.069632-0.034816 0.807424 0 5.50871 1.790771 15.509914 1.790771 34.564608 0 82.64151-20.47529 111.76704-47.601152 23.826637-22.229299 32.283546-46.810112 32.283546-62.442189 0-13.930291-6.033613-19.562496-8.035328-21.404467-8.77312-8.17623-22.457344-9.386803-29.864346-9.386803-24.808038 0-52.390298 11.948134-73.867264 31.913882C585.325466 185.208218 571.358822 241.73865 577.78135 254.790963zM500.89513 939.156685 205.914017 939.156685c-35.688243 0-64.883302-29.195981-64.883302-64.883712L141.030714 653.17123l359.864462 0L500.895177 939.15666z" fill="currentColor"/>
                </svg>
              </div>

              <!-- 已签到 -->
              <div v-else-if="item.isClock" class="w-12 h-12 rounded-xl bg-gradient-to-r from-green-400 to-emerald-500 flex items-center justify-center shadow-lg">
                <el-icon class="text-white text-2xl"><Check /></el-icon>
              </div>

              <!-- 未签到（过去） -->
              <div v-else-if="!item.isAfterToday && !item.isToday && !item.isClock" class="w-12 h-12 rounded-xl bg-gray-200 flex items-center justify-center">
                <svg class="w-6 h-6 text-gray-500" viewBox="0 0 1024 1024">
                  <path d="M512.697 63.445c-247.538 0-448.208 200.67-448.208 448.208 0 247.54 200.67 448.208 448.208 448.208 247.54 0 448.208-200.668 448.208-448.208 0-247.539-200.668-448.208-448.208-448.208z m177.99 581.763c12.264 12.273 12.264 32.17 0 44.427-12.284 12.273-32.172 12.273-44.454 0L512.916 556.318 379.59 689.635c-12.274 12.273-32.162 12.273-44.445 0-12.266-12.256-12.266-32.154 0-44.427l133.334-133.353-133.334-133.318c-12.266-12.256-12.266-32.17 0-44.444 12.282-12.256 32.17-12.256 44.445 0l133.326 133.335 133.317-133.335c12.282-12.256 32.17-12.256 44.453 0 12.265 12.274 12.265 32.19 0 44.444L557.351 511.855l133.335 133.353z" fill="currentColor"/>
                </svg>
              </div>

              <!-- 今日可签到 -->
              <div v-else-if="item.isToday && !item.isClock" class="w-12 h-12 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 flex items-center justify-center shadow-lg animate-pulse">
                <el-icon class="text-white text-xl"><Trophy /></el-icon>
              </div>
            </div>

            <!-- 状态文字 -->
            <div class="text-center">
              <button 
                v-if="item.isToday && !item.isClock"
                @click="handleUserClock(item)"
                class="px-4 py-2 bg-orange-500 text-white rounded-lg font-bold border-2 border-orange-600 hover:bg-orange-600 hover:border-orange-700 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105 animate-pulse"
              >
                立即签到
              </button>
              <span v-else-if="item.isClock" class="inline-flex items-center px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-medium">
                已签到
              </span>
              <span v-else-if="item.isAfterToday" class="inline-flex items-center px-3 py-1 bg-gray-100 text-gray-500 rounded-full text-xs font-medium">
                待签到
              </span>
              <span v-else class="inline-flex items-center px-3 py-1 bg-red-100 text-red-600 rounded-full text-xs font-medium">
                未签到
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 自定义动画 */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* 响应式网格调整 */
@media (max-width: 768px) {
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .gap-4 {
    gap: 0.75rem;
  }
}
</style>
